<template>
  <div class="layout">
    <div class="img-box">
      <input type="file" id="addbg" ref="addbg" @change="uploadBg" />
      <img :src="mylist.userBg" class="auto-img" alt="" />
    </div>
    <div class="main">
      <div class="wrapper">
        <div class="top">
          <div class="left">
            <div class="imgtou">
              <input type="file" id="addimg" ref="addimg" @change="uploadImg" />
              <img :src="mylist.userImg" class="auto-img" alt="" />
            </div>
            <div class="right">
              <div class="zh-name">{{ mylist.nickName }}</div>
              <div class="qian">{{ qian }}</div>
            </div>
          </div>
        </div>
        <div class="list">
          <div class="list-item" @click="getPerson">
            <div class="person">个人资料</div>
            <div class="icon">
              <van-icon name="arrow" class="auto" />
            </div>
          </div>
          <div class="list-item" @click="myorder">
            <div class="person">我的订单</div>
            <div class="icon">
              <van-icon name="arrow" class="auto" />
            </div>
          </div>
          <div class="list-item" @click="alllike">
            <div class="person">我的收藏</div>
            <div class="icon">
              <van-icon name="arrow" class="auto" />
            </div>
          </div>
          <div class="list-item" @click="address">
            <div class="person">地址管理</div>
            <div class="icon">
              <van-icon name="arrow" class="auto" />
            </div>
          </div>
          <div class="list-item" @click="center">
            <div class="person">安全中心</div>
            <div class="icon">
              <van-icon name="arrow" class="auto" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "My",
  created() {
    this.findMy();
    this.qian = JSON.parse(sessionStorage.getItem("qian"));
  },
  data() {
    return {
      mylist: [],
      qian: "",
    };
  },
  methods: {
    // 上传头像
    uploadImg() {
      let addImg = this.$refs.addimg;
      let file = addImg.files[0];
      if (file) {
        let _this = this;
        if (window.FileReader) {
          let serverBase64Img = "";
          //如果浏览器支持FileReader
          let reader = new FileReader(); //新建一个FileReader对象
          reader.readAsDataURL(file); //读取文件url
          reader.onloadend = function (e) {
            serverBase64Img = e.target.result.replace(
              /^data:image\/[A-Za-z]+;base64,/,
              ""
            ); //通过e,输出图片的base64
            let imgType = addImg.value.slice(addImg.value.lastIndexOf(".") + 1);
            imgType.toLowerCase();
            _this
              .axios({
                method: "post",
                url: "/updateAvatar",
                data: {
                  imgType,
                  serverBase64Img,
                },
              })
              .then((res) => {
                _this.mylist.userImg = res.data.userImg;
              });
          };
        }
        file = null;
      }
    },
    // 上传背景图
    uploadBg() {
      let addbg = this.$refs.addbg;
      let file = addbg.files[0];

      if (file) {
        let _this = this;
        if (window.FileReader) {
          let serverBase64Img = "";
          //如果浏览器支持FileReader
          let reader = new FileReader(); //新建一个FileReader对象
          reader.readAsDataURL(file); //读取文件url
          reader.onloadend = function (e) {
            serverBase64Img = e.target.result.replace(
              /^data:image\/[A-Za-z]+;base64,/,
              ""
            ); //通过e,输出图片的base64
            let imgType = addbg.value.slice(addbg.value.lastIndexOf(".") + 1);
            imgType.toLowerCase();
            _this
              .axios({
                method: "post",
                url: "/updateUserBg",
                data: {
                  imgType,
                  serverBase64Img,
                },
              })
              .then((res) => {
                _this.mylist.userBg = res.data.userBg;
              });
          };
        }
        file = null;
      }
    },
    //   查找我的数据
    findMy() {
      let token = sessionStorage.getItem("token");
      
      this.axios({
        url: "/findMy",
        method: "get",
      })
        .then((res) => {
          if (res.data.code == "A001") {
            if (token) {
              this.mylist = res.data.result[0];
              
            }
          }
        })
        .catch((err) => {});
    },
    //   跳转个人资料
    getPerson() {
      this.$router.push({ name: "Person" });
    },
    //跳转到我的收藏
    alllike() {
      this.$router.push({ name: "Alllike" });
    },
    // 跳转到地址管理
    address() {
      this.$router.push({ name: "Address" });
    },
    // 跳转到安全中心
    center() {
      this.$router.push({ name: "Center" });
    },
    myorder() {
      this.$router.push({ name: "MyOrder" });
    },
  },
};
</script>
<style lang="less" scoped>
.layout {
  background: #f0f0f0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
}
.img-box {
  height: 200px;
  position: relative;
  overflow: hidden;
  #addbg {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
  }
}
.main {
  padding: 10px;
  width: 90%;
  background: rgba(255, 255, 255, 0.6);
  position: relative;
  top: -40px;
  border-radius: 10px;
  margin: 0 auto;
  .wrapper {
    .top {
      .left {
        display: flex;
        .imgtou {
          width: 80px;
          overflow: hidden;
          border-radius: 50%;
          background: #f0f0f0;
          height: 80px;
          margin-right: 20px;
          margin-bottom: 30px;
          position: relative;
          #addimg {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            opacity: 0;
          }
        }
        .right {
          .zh-name {
            font-size: 16px;
            color: #0c43ba;
            font-weight: bold;
            margin-bottom: 15px;
          }
          .qian {
            font-size: 14px;
            color: #9da3a6;
          }
        }
      }
    }
    .list {
      font-size: 14px;
      .list-item {
        display: flex;
        align-items: center;
        height: 60px;
        line-height: 60px;
        border-bottom: 2px dashed #f0f0f0;
      }
      .icon {
        margin-left: auto;
        .auto {
          vertical-align: middle;
        }
      }
    }
  }
}

</style>